<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution salon-schedule">
        <!-- <basic-container v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"> -->
        <basic-container v-loading="loading">
            <div class="left-block">
                <div class="left-block-top">
                    <a-calendar v-model:value="value" :fullscreen="false" @select="onSelect" />
                </div>
                <div class="left-block-bottom">
                    <div class="waiter-list">
                        <div class="bottom-header">
                        当值服务员
                        </div>
                        <el-radio-group v-model="radio" v-if="doctorList.length > 0" @change="choseDorcter">
                            <div class="radio-block" v-for="item in doctorList">
                                <el-radio :label="item.waiterId">{{item.waiterName}}
                                </el-radio>
                                <span class="detail-span" @click="goDetail(item)">资料</span>
                            </div>
                        </el-radio-group>
                        <div v-else class="empty-block">
                            <img :src="img" alt="">
                            <p>暂无数据</p>
                        </div>
                    </div>
                    <div class="item-list">
                        <div class="bottom-header">
                            项目列表
                            <!-- <span style="font-size:12px;color: red">(烫发，直发只能在9:00或14:00开始预约”)</span> -->
                        </div>
                        <div class="radio-block-wrapper">
                            <el-radio-group v-model="radio1" v-if="itemList.length > 0" @change="choseItem">
                                <div class="radio-block" v-for="item in itemList" v-if="itemList.length > 0">
                                    <!-- <span class="item-name-span" :title="item.itemName">{{item.itemName}}
                                    </span> -->
                                     <el-radio :label="item.itemId">{{item.itemName}}
                                    </el-radio>
                                    <span class="item-min-span">{{item.serviceMinutes}}分钟</span>
                                </div>
                            </el-radio-group>
                            <div v-else class="empty-block">
                                <img :src="img" alt="">
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
            <div class="right-block">
                <div class="operate-block">
                    <div class="date-tip">{{date}}</div>
                   <button type="button" @click="refresh" class="el-button el-button--default el-button--small is-circle"><!----><i class="el-icon-refresh"></i><!----></button>
                   <span style="color: red;margin-left: 20px;">请先选择需要预约的日期和当值服务员及项目，再勾选需要预约的时间段，点击【确定】按钮进行预约。</span>
                   <el-button type="primary" style="float:right;margin-right: 2%;" @click="submitReserve">确定</el-button>
                </div>
                <el-checkbox-group v-model="checkList" @change="changeCheck">
                <div class="period-list">
                    <div class="bottom-header">
                        上午：
                    </div>
                    <div class="period-list-item blue" :class="{'finish': item.yystatus === '2', 'green': canReserve && item.status == '1' && item.yystatus == '1'}" v-for="item in swList" :key="item.periodId">
                        <div class="item-block">
                            <p>{{item.periodName}}</p>
                            <!-- <p v-if="item.waiterBusy == true">已占用</p> -->
                            <p v-if="item.waiterBusy == true">已预约</p>
                            <p v-if="!item.waiterBusy && item.yystatus === '2'">已过期</p>
                            <p v-if="!item.waiterBusy && item.yystatus == '1' && item.hasBill">您已预约成功</p>
                            <p v-if="!item.waiterBusy && item.yystatus == '1' && !item.hasBill">已预约</p>
                            <!-- <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0'"><el-button type="primary"  @click="addObj(item)">预约</el-button></p> -->
                            <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0'"><el-checkbox :label="item.periodId" @change="changeCheck1($event, item)"></el-checkbox></p>
                            <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel"><el-button  type="warning" @click="cancel(item)">取消</el-button></p>
                            <p v-if="!(item.waiterBusy == true || (!item.waiterBusy && item.yystatus === '2') || (!item.waiterBusy && item.yystatus == '1' && item.hasBill) || (!item.waiterBusy && item.yystatus == '1' && !item.hasBill) || (!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0') || (!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel)) && canReserve">{{unScheduleReason}}</p>
                        </div>
                    </div>
                </div>
                <div class="period-list">
                    <div class="bottom-header">
                        下午：
                    </div>
                    <div class="period-list-item blue" :class="{'finish': item.yystatus === '2', 'green': canReserve && item.status == '1' && item.yystatus == '1'}" v-for="item in xwList" :key="item.periodId">
                        <div class="item-block">
                            <p>{{item.periodName}}</p>
                            <!-- <p v-if="item.waiterBusy == true">已占用</p> -->
                            <p v-if="item.waiterBusy == true">已预约</p>
                            <p v-if="!item.waiterBusy && item.yystatus === '2'">已过期</p>
                            <p v-if="!item.waiterBusy && item.yystatus == '1' && item.hasBill">您已预约成功</p>
                            <p v-if="!item.waiterBusy && item.yystatus == '1' && !item.hasBill">已预约</p>
                            <!-- <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0'"><el-button type="primary" @click="addObj(item)">预约</el-button></p> -->
                            <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0'"><el-checkbox :label="item.periodId" @change="changeCheck1($event, item)"></el-checkbox></p>
                            <p v-if="!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel"><el-button type="warning" @click="cancel(item)">取消</el-button></p>
                            <p v-if="!(item.waiterBusy == true || (!item.waiterBusy && item.yystatus === '2') || (!item.waiterBusy && item.yystatus == '1' && item.hasBill) || (!item.waiterBusy && item.yystatus == '1' && !item.hasBill) || (!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '0') || (!item.waiterBusy && canReserve && item.status == '1' && item.yystatus == '1' && item.canCancel)) && canReserve">{{unScheduleReason}}</p>
                        </div>
                    </div>
                </div>
                </el-checkbox-group>
                 <el-dialog
                    title="通告"
                    class="notice-dia"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :show-close="false"
                    :modal-append-to-body="false"
                    :visible.sync="dialogVisible"
                    width="30%">
                    <span>{{notice}}</span>
                </el-dialog>
                 <el-dialog
                    title="提示"
                    :modal="false"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :show-close="false"
                    :modal-append-to-body="false"
                    :visible.sync="dialogVisible1"
                    width="30%">
                    <span>当前时间未开放预约</span>
                </el-dialog>
            </div>
            <el-dialog
                title="服务员资料"
                vi-if="dialogVisible2"
                class="doctor-dialog"
                :visible.sync="dialogVisible2"
                :close-on-click-modal="false"
                width="70%">
                <div class="content">
                    <el-form :model="personData" label-width="100px">
                        <!-- <el-row>
                            <el-form-item label="头像">
                                <img height="150" :src="personData.avatar" alt="">
                             </el-form-item>
                        </el-row> -->
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名">
                                    <span>{{personData.waiterName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <span>{{personData.sexName}}</span>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="编码">
                                    <span>{{personData.no}}</span>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <span>{{personData.sexName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属公司">
                                    <span>{{personData.company}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="地址">
                                    <span>{{personData.address}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="身份证号码">
                                    <span>{{personData.idCard}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <el-row>
                            <!-- <el-col :span="12">
                                <el-form-item label="生日">
                                    <span>{{personData.birthday}}</span>
                                </el-form-item>
                            </el-col> -->
                            <el-col :span="12">
                                <el-form-item label="联系电话">
                                    <span>{{personData.phone}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="12">
                                <el-form-item label="职务">
                                    <span>{{personData.post}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="工龄">
                                    <span>{{personData.workYear}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学历">
                                    <span>{{personData.education}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="履历">
                                    <span>{{personData.experience}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                    </el-form>
                </div>
            </el-dialog>
        </basic-container>
       
    </div>
</template>

<script>
    import {getScheduleWaiter, getWaiterReserve} from '@/api/salon/salonschedule'
    import {addObj, cancel} from '@/api/salon/salonbill'
    import eventBus from '@/util/eventBus'
    import {getReservePeriod} from '@/api/reserve/reserveitem'
    import {fetchList} from '@/api/salon/salonitem'
    import { mapGetters } from 'vuex'
    import {getCurrentDate, dateFormat} from '@/util/date'
    import {findByvalue} from '@/util/util'

    import { remote } from "@/api/admin/dict";

    export default {
        name: 'salonschedule',
        data() {
            return {
                loading: false,
                radio: '',
                checkList: [],
                radio1: '',
                itemName: '',
                serviceMinutes:'',
                dataObj: {},
                personData: {},
                canReserve: true,
                checkFalseId: '',
                checkTrueId: '',
                unScheduleReason: '',
                isSalonAdmin: false,
                notice: '',
                status: '1',
                periodIds: [],
                sorts: [],
                isOpenDate: true,
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                periodList: [],
                date: '',
                itemList: [],
                genderList: [],
                swList: [],
                xwList: [],
                week_day: [],
                dates: dateFormat(new Date(), 'yyyy-MM-dd'),
                img: require('../../../../public/img/empty.svg'),
                value: '',
                doctorList: []
            }
        },
        computed: {
            ...mapGetters(['isSalon']),
        },
        wacth: {
            isSalon(newVal, oldVal) {
            }
        },
        created() {
            remote('week_day').then(response => {
                this.week_day = response.data.data
            })
            remote('gender').then(response => {
                this.genderList = response.data.data
            })
            fetchList({current: 1, size: 1000, status: '1'}).then(response => {
                this.itemList = response.data.data.records
                let atts = response.data.data.records.filter(item => {
                    return item.defaultFlag === 1
                })
                this.radio1 = atts.length ? atts[0].itemId : ''
                this.itemName = atts.length ? atts[0].itemName : ''
                this.serviceMinutes = atts[0].serviceMinutes
            })
            this.eventBusHandle()
            this.getReservePeriod()
        },
        methods: {
            changeCheck1(value, item) {
                if (value) {
                    if (this.sorts.length) {
                        if (!this.isSalonAdmin) {
                            if (this.sorts.length === 1) {
                                if (Math.abs(item.sort - this.sorts[0]) !== 1) {
                                    this.$message.warning('请预约相邻时间段')
                                    this.checkFalseId = item.periodId
                                    return
                                }
                            } else {
                                let minN = Math.min(...this.sorts)
                                let minx = Math.max(...this.sorts)
                                if (Math.abs(item.sort - minN) !== 1 && Math.abs(item.sort - minx) !== 1) {
                                    this.$message.warning('请预约相邻时间段')
                                    this.checkFalseId = item.periodId
                                    return
                                }
                            }
                            let n = (this.sorts.length + 1) * 30
                            if (n > this.serviceMinutes) {
                                this.$message.warning('预约总时长不得超过项目服务时长')
                                this.checkFalseId = item.periodId
                                return
                            } else {
                                this.sorts.push(item.sort)
                                this.periodIds.push(item.periodId)
                            }
                        } else {
                            this.sorts.push(item.sort)
                            this.periodIds.push(item.periodId)
                        }
                    } else {
                        this.sorts.push(item.sort)
                        this.periodIds.push(item.periodId)
                    }
                } else {
                    let aflag = this.sorts.some(citem => {
                       return (citem - item.sort === 1)
                    })
                    let bflag = this.sorts.some(citem => {
                       return (item.sort - citem === 1)
                    })
                    if (aflag && bflag) {
                        this.$message.warning('请不要取消勾选中间时段')
                        this.checkTrueId = item.periodId
                        return
                    }
                    this.checkList = this.checkList.filter(citem => {
                        return citem != item.periodId
                    })
                    this.sorts = this.sorts.filter(citem => {
                        return citem != item.sort
                    })
                    this.periodIds = this.periodIds.filter(citem => {
                        return citem != item.periodId
                    })
                }
            },
            changeCheck(value) {
                if (this.checkFalseId) {
                    this.checkList = this.checkList.filter(item => {
                        return item != this.checkFalseId
                    })
                    this.checkFalseId = ''
                }
                if (this.checkTrueId) {
                    this.checkList.push(this.checkTrueId)
                    this.checkTrueId = ''
                }
            },
            resetItem() {
                this.checkTrueId = ''
                this.checkFalseId = ''
                this.checkList = []
                this.periodIds = []
                this.dialogVisible1 = false
                this.sorts = []
            },
            submitReserve() {
                if (!this.sorts.length) {
                    this.$message.warning('请勾选时段')
                    return
                }
                let n = this.sorts.length * 30
                if (n < this.serviceMinutes && !this.isSalonAdmin) {
                    // this.$message.warning('预约总时长不够完成该项目，请继续预约')
                    this.$confirm('预约总时长不够完成该项目，请继续预约', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'red-confirm',
                        type: 'warning'
                    }).then(() => {
                        // this.getWaiterReserve()
                    })
                } else {
                    this.$confirm('如预约后无法到场的，请提前半个小时取消预约；如未到场又未取消预约的，将记为一次爽约。当月如累计三次爽约，将自第三次爽约起15日内无法预约，是否确定预约？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'red-confirm',
                        type: 'warning'
                    }).then(() => {
                        let params = {
                            billDate: this.dates,
                            waiterId: this.radio,
                            itemId: this.radio1,
                            itemName: this.itemName,
                            periodIds: this.periodIds
                        }
                        addObj(params).then(response => {
                            this.$message.success('预约成功')
                            this.getWaiterReserve()
                            this.resetItem()
                        })
                    }).catch(() => {
                        // this.sorts.pop()
                        // this.periodIds.pop()
                    })
                }
            },
            refresh() {
                let params = {
                    date: this.dates,
                    type: 'salon'
                }
                getReservePeriod(params).then(response => {
                    let a = 0
                    this.periodList = response.data.data.periodList.map(item => {
                        a++
                        item.sort = a
                        return item
                    })
                    let atts = response.data.data.periodList.filter(item => {
                        return item.status == '1' && item.yystatus == '1' && item.canCancel
                    })
                    // this.periodIds = atts.map(item => {
                    //     return item.periodId
                    // })
                    // this.sorts = atts.map(item => {
                    //     return item.sort
                    // })
                    this.swList = response.data.data.periodList.filter(item => {
                        return item.type === '1'
                    })
                    this.xwList = response.data.data.periodList.filter(item => {
                        return item.type === '2'
                    })
                    this.getWaiterReserve()
                })
            },
            eventBusHandle () {
                let _this = this
                eventBus.$on('isSalon', function () {
                    _this.refresh()
                })
            },
            getReservePeriod() {
                let params = {
                    date: this.dates,
                    type: 'salon'
                }
                getReservePeriod(params).then(response => {
                    this.dataObj = response.data.data
                    this.status = response.data.data.status
                    this.isOpenDate = response.data.data.isOpenDate
                    if (response.data.data.status === '0') {
                        this.notice = response.data.data.notice
                        this.dialogVisible = true
                    } else {
                        this.dialogVisible = false
                        if(response.data.data.isOpenDate) {
                            this.dialogVisible1 = false
                            let a = 0
                            this.periodList = response.data.data.periodList.map(item => {
                                a++
                                item.sort = a
                                return item
                            })
                            // let atts = response.data.data.periodList.filter(item => {
                            //     return item.status == '1' && item.yystatus == '1' && item.canCancel
                            // })
                            // this.periodIds = atts.map(item => {
                            //     return item.periodId
                            // })
                            // this.sorts = atts.map(item => {
                            //     return item.sort
                            // })
                            this.swList = response.data.data.periodList.filter(item => {
                                return item.type === '1'
                            })
                            this.xwList = response.data.data.periodList.filter(item => {
                                return item.type === '2'
                            })
                            let newdate = new Date(this.dates)
                            this.date = (newdate.getMonth() + 1) + '月' + newdate.getDate() + '日' + '  ' + findByvalue(this.week_day, String(newdate.getDay()))
                            this.dates = dateFormat(newdate, 'yyyy-MM-dd')
                            getScheduleWaiter({date: this.dates}).then(response => {
                                this.doctorList = response.data.data
                            })
                        } else {
                            this.dialogVisible1 = true
                        }
                    }
                })
            },
            addObj(item) {
                let _this = this
                if (this.sorts.length) {
                    if (!this.isSalonAdmin) {
                        if (this.sorts.length === 1) {
                            if (Math.abs(item.sort - this.sorts[0]) !== 1) {
                                this.$message.warning('请预约相邻时间段')
                                return
                            }
                        } else {
                            let minN = Math.min(...this.sorts)
                            let minx = Math.max(...this.sorts)
                            if (Math.abs(item.sort - minN) !== 1 && Math.abs(item.sort - minx) !== 1) {
                                this.$message.warning('请预约相邻时间段')
                                return
                            }
                        }
                        let n = (this.sorts.length + 1) * 30
                        if (n > this.serviceMinutes) {
                            this.$message.warning('预约总时长不得超过项目服务时长')
                            return
                        } else {
                            this.sorts.push(item.sort)
                            this.periodIds.push(item.periodId)
                        }
                    } else {
                        this.sorts.push(item.sort)
                        this.periodIds.push(item.periodId)
                    }
                } else {
                    this.sorts.push(item.sort)
                    this.periodIds.push(item.periodId)
                }
                this.$confirm('如预约后无法到场的，请提前半个小时取消预约；如未到场又未取消预约的，将记为一次爽约。当月如累计三次爽约，将自第三次爽约起15日内无法预约，是否确定预约？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'red-confirm',
                    type: 'warning'
                }).then(() => {
                    let n = this.sorts.length * 30
                    let params = {
                        billDate: this.dates,
                        waiterId: this.radio,
                        itemId: this.radio1,
                        itemName: this.itemName,
                        periodIds: this.periodIds
                    }
                    addObj(params).then(response => {
                        if (n < this.serviceMinutes && !this.isSalonAdmin) {
                            // this.$message.warning('预约总时长不够完成该项目，请继续预约')
                            this.$confirm('预约总时长不够完成该项目，请继续预约', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                customClass: 'red-confirm',
                                type: 'warning'
                            }).then(() => {
                                this.getWaiterReserve()
                            })
                        } else {
                            this.$message.success('预约成功')
                            this.getWaiterReserve()
                        }
                    })
                }).catch(() => {
                    this.sorts.pop()
                    this.periodIds.pop()
                })
            },
            cancel(item) {
                this.$confirm('确定取消此预约?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        billId: item.billId
                    }
                    cancel(params).then(response => {
                        this.$message.success('取消成功')
                        this.resetItem()
                        this.getWaiterReserve()
                    })
                })
            },
            choseDorcter(value) {
                this.resetItem()
                this.refresh()
            },
            choseItem(value) {
                this.resetItem()
                let att = this.itemList.filter(item => {
                    return item.itemId === value
                })[0]
                this.serviceMinutes = att.serviceMinutes
                this.itemName = att.itemName
                this.refresh()
            },
            getWaiterReserve() {
                let _this = this
                let params = {
                    date: this.dates,
                    waiterId: this.radio,
                    itemId: this.radio1
                }
                this.loading = true
                getWaiterReserve(params).then(response => {
                    this.loading = false
                    this.canReserve = response.data.data.canReserve
                    this.unScheduleReason = response.data.data.unScheduleReason
                    this.isSalonAdmin = response.data.data.isSalonAdmin
                    if (this.canReserve) {
                        let a = 0
                        response.data.data.schedulePeriodList.map(item => {
                            a++
                            item.sort = a
                            _this.swList.map(citem => {
                                if(citem.periodId === item.periodId) {
                                    citem.yystatus = item.status
                                    citem.billId = item.billId
                                    citem.waiterBusy = item.waiterBusy
                                    citem.canCancel = item.canCancel
                                    citem.hasBill = item.hasBill
                                }
                            })
                            _this.xwList.map(citem => {
                                if(citem.periodId === item.periodId) {
                                    citem.yystatus = item.status
                                    citem.billId = item.billId
                                    citem.waiterBusy = item.waiterBusy
                                    citem.canCancel = item.canCancel
                                    citem.hasBill = item.hasBill
                                }
                            })
                        })
                        
                        _this.swList = Object.assign([], _this.swList)
                        _this.xwList = Object.assign([], _this.xwList)
                        let newAtt = _this.swList.concat(_this.xwList)
                        // let atts = newAtt.filter(item => {
                        //     return item.status == '1' && item.yystatus == '1' && item.canCancel
                        // })
                        // _this.periodIds = atts.map(item => {
                        //     return item.periodId
                        // })
                        // _this.sorts = atts.map(item => {
                        //     return item.sort
                        // })
                    } else {
                        this.dialogVisible1 = true
                    }
                })
            },
            goDetail(item) {
                item.sexName = findByvalue(this.genderList, item.sex)
                this.personData = item
                this.dialogVisible2 = true
            },
            onSelect(value) {
                this.radio = ''
                // this.radio1 = ''
                // this.itemName = ''
                this.dialogVisible = false
                this.dialogVisible1 = false
                this.canReserve = true
                this.unScheduleReason =  ''
                this.swList = []
                this.xwList = []
                let newdate = new Date(value)
                this.dates = dateFormat(newdate, 'yyyy-MM-dd')
                this.date = (newdate.getMonth() + 1) + '月' + newdate.getDate() + '日' + '  ' + findByvalue(this.week_day, String(newdate.getDay()))
                this.getReservePeriod()
                if (this.status === '1' && this.isOpenDate) {
                    getScheduleWaiter({date: this.dates}).then(response => {
                        this.doctorList = response.data.data
                    })
                }
            },
        }
    }
</script>
<style scoped lang="scss">
.salon-schedule{
    /deep/.el-dialog__wrapper{
        top: 80px;
        left: 450px;
        .el-dialog{
            transform: translateX(-50%);
        }
    }
    .doctor-dialog{
        /deep/.el-dialog{
            transform: translateX(-10%);
        }
    }
    /deep/.v-modal{
        top: 80px;
        left: 120px;
    }
    .left-block {
        width: 300px;
        float: left;
        .left-block-top{
            height: 320px;
        }
        /deep/.ant-fullcalendar-header{
            text-align: left;
        }
        .left-block-bottom{
            border-top: 1px solid #eee;
            height: calc(100vh - 440px);
            .waiter-list, .item-list {
                height: 50%;
                .el-radio-group, .radio-block-wrapper{
                    height: calc(100% - 30px);
                    overflow: auto;
                }
            }
            .bottom-header{
                height: 30px;
                line-height: 30px;
                background: #eee;
                padding-left: 10px; 
            }
            .empty-block{
                text-align: center;
                img{
                    width: 150px;
                    margin-top: 20px;
                }
            }
            /deep/.el-radio-group{
                width: 100%;
                .el-radio{
                    line-height: 30px;
                    height: 30px;
                    margin-right: 0;
                }
            }
            .item-name-span{
                display: inline-block;
                line-height: 30px;
                width: 230px;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 30px;
                margin-right: 0;
            }
            .item-min-span{
                float: right;
                font-size: 15px;
                line-height: 30px;
            }
            .detail-span{
                float: right;
                cursor: pointer;
                font-size: 15px;
                line-height: 30px;
                &:hover{
                    color: #409EFF;
                }
            }
        }
        /deep/.ant-fullcalendar-header{
            .ant-radio-group{
                display: none;
            }
        }
    }
    .content{
        /deep/.el-form-item--mini.el-form-item, /deep/.el-form-item--small.el-form-item{
            margin-bottom: 5px;
        }
    }
    .right-block{
        margin-left: 20px;
        width:calc(100% - 320px);
        float:left;
        .date-tip{
            float: left;
            margin-right: 10px;
            line-height: 30px;
        }
        .period-list{
            margin-top: 13px;
            height: calc((100vh - 190px)/2);
            .period-list-item{
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
                width: 16.6%;
                height: 40%;
                border: 1px solid #eee;
                .item-block{
                    text-align: center;
                }
                p{
                    margin-bottom: 8px;
                    font-size: 16px;
                    /deep/.el-checkbox__label{
                        display: none;
                    }
                    /deep/.el-checkbox__inner{
                        width:20px;
                        height: 20px;
                        &::after{
                            height: 14px;
                            left: 6px;
                            top: 0;
                            width: 6px;
                        }
                    }
                    &:first-child{
                        font-weight: bold;
                    }
                }
            }
            .blue{
                background: #f2f9ff;
            }
            .green{
                background: #f4fdf8;
            }
            .finish{
                background: #f8f8f8;
            }
            .finished{
                background: #fff6f7;
            }
        }
    }
}
</style>